<template>
	<view class="rf-account-level" v-if="!loading">
		<view class="title">用户等级列表</view>

		<view class="advance-area">
			<view class="flex-box tc thead">
				<view class="item-3">等级</view>
				<view class="item-3">等级名称</view>
				<view class="item-3">升级条件(积分)</view>
				<!-- <view class="item-3">说明</view> -->
			</view>

			<view class="flex-box table tc" v-for="(item, index) in items" :key="index">
				<text class="item-3">
					<uv-icon name="level" :label="item.level" :color="themeColor.color" :size="16" />
				</text>

				<text class="item-3">
					{{ item.name }}
				</text>

				<text class="item-3 font-sm">
					积分满 <text :class="'text-' + themeColor.name">{{ item.integral }}</text>
				</text>

				<!-- <text class="item-3 font-sm">
					<text>通过发布救助信息、帖子、评论等获取。</text>
				</text> -->
			</view>
		</view>

		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
	import {
		levelList
	} from '@/api/userInfo';

	export default {
		data() {
			return {
				items: [],
				loading: true
			};
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				this.getLevelList();
			},
			async getLevelList() {
				await this.$http.get(levelList).then(async r => {
					this.loading = false;
					this.items = r.data;
				}).catch(() => {
					this.loading = false;
				});
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			}
		}
	};
</script>

<style lang="scss">
$color: #e0e0e0;

page {
	background: $color-white;
}

.rf-account-level {
	padding: 30rpx;
	display: flex;
	flex: 1;
	flex-direction: column;

	.flex-box {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-box>.item-2 {
		flex: 0 0 50%;
	}

	.flex-box>.item-3 {
		flex: 0 0 33.3333%;
		;
		height: 80rpx;
	}

	.flex-box>.item-4 {
		flex: 0 0 25%;
	}

	.title {
		margin: 30rpx 0;
		font-size: $font-lg;
		font-weight: 600;
		color: #333;
	}

	//普通表格
	.genaral-area {
		.item-2 {
			font-size: 26rpx;
			border: 1rpx solid $color;
			border-width: 1rpx 1rpx 0 0;
			padding: 16rpx 0;
			box-sizing: border-box;
			text-align: center;

			&:first-child {
				border-left-width: 1rpx;
			}

			&:last-child {
				border-right-width: 1rpx;
			}
		}

		.thead {
			.item-2 {
				font-weight: bold;

				box-sizing: border-box;
			}
		}

		.table {
			&:last-child {
				border-bottom: 1rpx solid $color;
			}

			.item-2 {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}
	}

	// 多行合并表格
	.advance-area {

		.item-3,
		.item-4 {
			font-size: 26rpx;
			border: 1rpx solid $color;
			border-width: 1rpx 1rpx 0 0;
			box-sizing: border-box;
			text-align: center;

			&:first-child {
				border-left-width: 1rpx;
			}

			&:last-child {
				border-right-width: 1rpx;
			}
		}

		.thead {

			.item-3,
			.item-4 {
				font-weight: bold;
				padding: 16rpx 0;
				box-sizing: border-box;
			}
		}

		.table {
			&:last-child {
				border-bottom: 1rpx solid $color;
			}

			.item-3,
			.item-4 {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}

		.table-flex {
			flex: 1;

			.item {
				border-bottom: 1rpx solid $color;
				padding: 10rpx 0;
				box-sizing: border-box;

				&:last-child {
					border-width: 0;
				}
			}
		}

		.font-sm {
			font-size: $font-sm;
			padding: 0 10rpx;
		}
	}
}
</style>
